<template>
  <div class="container 2xl mx-auto">

      <NavWap  class="xl:hidden" @showBigSlideMenu="showBigSlideMenu"  />
      <NavPc  class="hidden xl:block" @showBigSlideMenu="showBigSlideMenu"  />
       <!-- pc端才会出现左侧小菜单 -->
      <SlideMenuSmall class="hidden md:block"  v-if="slideTpye == 'small'"  />
       
       <!-- pc web端 拉出左侧菜单 -->
       <SlideMenuBig  v-if="slideTpye == 'big'" @showBigSlideMenu="showBigSlideMenu"/>
 
  <div :class="pl" class="    pt-16  min-h-screen w-full"  >
     
  <!--
  This example requires Tailwind CSS v2.0+ 
  
  This example requires some changes to your config:
  
  ```
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/forms'),
    ],
  }
  ```
-->
<div class="p-3">
  <div>
    <!--
      Mobile filter dialog

      Off-canvas filters for mobile, show/hide based on off-canvas filters state.
    -->
    <div  v-if="filterStatus==1"  class="fixed inset-0 flex z-40 lg:hidden" role="dialog" aria-modal="true">
      <!--
        Off-canvas menu overlay, show/hide based on off-canvas menu state.

        Entering: "transition-opacity ease-linear duration-300"
          From: "opacity-0"
          To: "opacity-100"
        Leaving: "transition-opacity ease-linear duration-300"
          From: "opacity-100"
          To: "opacity-0"
      -->
      <div class="fixed inset-0 bg-black bg-opacity-25" aria-hidden="true"></div>

      <!--
        Off-canvas menu, show/hide based on off-canvas menu state.

        Entering: "transition ease-in-out duration-300 transform"
          From: "translate-x-full"
          To: "translate-x-0"
        Leaving: "transition ease-in-out duration-300 transform"
          From: "translate-x-0"
          To: "translate-x-full"
      -->
      <div class="ml-auto relative max-w-xs w-full h-full  shadow-xl py-4 pb-12 flex flex-col overflow-y-auto bg-gray-800">
        <div class="px-4 flex items-center justify-between">
          <h2 class="text-lg font-medium text-gray-300">Filters</h2>
          <button @click="dohideFilters" type="button" class="-mr-2 w-10 h-10  p-2 rounded-md flex items-center justify-center text-gray-300">
            <span class="sr-only">Close menu</span>
            <!-- Heroicon name: outline/x -->
            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <!-- Filters -->
        <form class="mt-4 border-t border-gray-700" >
          <h3 class="sr-only">Categories</h3>
          <ul role="list" class="font-medium text-gray-300 px-2 py-3">
            <li>
              <a href="/" class="block px-2 py-3">
                Home
              </a>
            </li>

            <li>
              <a href="/ski-resort" class="block px-2 py-3">
                Ski Resorts
              </a>
            </li>

            <li>
              <a href="/community" class="block px-2 py-3">
                community
              </a>
            </li>

             
          </ul>

           <div class="border-b border-t border-gray-700 p-4">
              <h3 class="-my-3 flow-root">
                <!-- Expand/collapse section button -->
                <button type="button" class="py-3  w-full flex items-center justify-between text-sm text-gray-300 hover:text-gray-300" aria-controls="filter-section-1" aria-expanded="false">
                  <span class="font-medium text-gray-300">
                    Regions
                  </span>
                  
                </button>
                
              </h3>
              <p class=" text-gray-400 text-xs">Where are you going?</p>
              <!-- Filter section, show/hide based on section state. -->
              <div class="pt-6" id="filter-section-1">
                <div class="space-y-4">
                  
                  <div class="flex items-center">
                   <svg t="1643012181855" class="w-6 h-6" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15177" width="200" height="200"><path d="M714.835718 834.86814a42.810016 42.810016 0 0 1-6.654165 10.004515L551.552732 1001.571274a43.159011 43.159011 0 0 1-6.328437 9.515922 49.464182 49.464182 0 0 1-66.402058 0 43.298609 43.298609 0 0 1-6.11904-9.306525l-157.536206-157.536207a43.275343 43.275343 0 0 1-6.491302-9.771851 442.05995 442.05995 0 1 1 406.160029 0.395527zM512 93.719734a348.994698 348.994698 0 0 0-162.864192 657.552543v17.170539a44.205995 44.205995 0 0 1 29.315554 12.656874L512 914.648328l132.920447-132.943713a44.205995 44.205995 0 0 1 29.85068-12.726674v-17.705664A348.994698 348.994698 0 0 0 512 93.719734z m0 558.391516a209.396819 209.396819 0 1 1 209.396819-209.396818 209.396819 209.396819 0 0 1-209.396819 209.396818z m0-372.261011a162.864192 162.864192 0 1 0 162.864192 162.864193 162.864192 162.864192 0 0 0-162.864192-162.864193z" p-id="15178" fill="#8a8a8a"></path></svg>
                   <label for="filter-category-0" class="ml-2 text-sm text-gray-300">
                      <!-- <p>Alaska,United States</p> -->
                      <p class="">About {{count}} Ski Resorts  {{region && 'around the'+region}}</p>
                    </label>
                   
                  </div>
                    

                 <div class="flex items-center  align-middle text-center">
                   
                   <label for="modal-region" class="mx-auto block">  <div class="btn btn-sm btn-warning ">View All Regions </div> </label>
                     
                  </div>

                </div>
              </div>
            </div>

            <div class="border-b border-gray-700 p-4">
              <h3 class="-my-3 flow-root">
                <!-- Expand/collapse section button -->
                <button type="button" class="py-3  w-full flex items-center justify-between text-sm text-gray-300 hover:text-gray-300" aria-controls="filter-section-0" aria-expanded="false">
                  <span class="font-medium text-gray-300">
                    Category
                  </span>
                   
                </button>
              </h3>
              <!-- Filter section, show/hide based on section state. -->
              <div class="pt-6" id="filter-section-0">
                <div class="space-y-4">
                  <div class="flex items-center">
                    <input @click="getTopic" id="filter-color-0" name="category[]" value="all_mountain_terrain" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-0" class="ml-3 text-sm text-gray-300">
                      All Mountain Terrain
                    </label>
                  </div>

                  <div class="flex items-center">
                    <input  @click="getTopic" id="filter-color-1" name="category[]" value="overall_value" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-1" class="ml-3 text-sm text-gray-300">
                      Overall Value
                    </label>
                  </div>

                  <div class="flex items-center">
                    <input  @click="getTopic" id="filter-color-2" name="category[]" value="expert" type="checkbox"  class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-2" class="ml-3 text-sm text-gray-300">
                      Expert
                    </label>
                  </div>

                  <div class="flex items-center">
                    <input id="filter-color-3"  @click="getTopic" name="category[]" value="apres_ski" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-3" class="ml-3 text-sm text-gray-300">
                      Apres Ski
                    </label>
                  </div>

                  <div class="flex items-center">
                    <input   @click="getTopic" id="filter-color-4" name="category[]" value="terrain_park" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-4" class="ml-3 text-sm text-gray-300">
                      Terrain Park
                    </label>
                  </div>

                  <div class="flex items-center">
                    <input   @click="getTopic" id="filter-color-5" name="category[]" value="intermediate" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-5" class="ml-3 text-sm text-gray-300">
                      Intermediate
                    </label>
                  </div>
                  <div class="flex items-center">
                    <input   @click="getTopic" id="filter-color-5" name="category[]" value="family_friend" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-6" class="ml-3 text-sm text-gray-300">
                      Family Friend
                    </label>
                  </div>
                  <div class="flex items-center">
                    <input  @click="getTopic" id="filter-color-5" name="category[]" value="beginner" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-7" class="ml-3 text-sm text-gray-300">
                      Beginner
                    </label>
                  </div>
                   

                </div>
              </div>
            </div>

        </form>
      </div>
    </div>

    <main class="w-full">
       <div v-if="meta.title">
        <div  class="relative z-10 flex items-baseline justify-between pt-4   border-gray-700">
          <h1 class="text-xl font-extrabold tracking-tight text-gray-300" v-html="meta.title"> </h1>
        </div>
        <div class="text-gray-400 border-b pb-2" v-html="meta.description"></div>
      </div>
      <div v-else class="relative z-10 flex items-baseline justify-between pt-4 pb-6 border-b border-gray-700">
        <h1 class="text-xl font-extrabold tracking-tight text-gray-300">Find A Ski Resort</h1>

      </div>

      <section aria-labelledby="products-heading" class="pt-6 pb-24">
        <h2 id="products-heading" class="sr-only">Products</h2>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-x-8 gap-y-10">
          <!-- Filters -->
          <form class="hidden lg:block bg-gray-800 rounded-box p-4" id="filtersForLg">
            <!-- <h3 class="sr-only">Categories</h3>
            <ul role="list" class="text-sm font-medium text-gray-300 space-y-4 pb-6 border-b border-gray-700">
              <li>
                <a href="#">
                  Totes
                </a>
              </li>

            </ul> -->
            <div class="border-b border-gray-700 pb-6">
              <h3 class="-my-3 flow-root">
                <!-- Expand/collapse section button -->
                <button type="button" class="py-3  w-full flex items-center justify-between text-sm text-gray-300 hover:text-gray-300" aria-controls="filter-section-1" aria-expanded="false">
                  <span class="font-medium text-gray-300">
                    Regions
                  </span>
                  
                </button>
                
              </h3>
              <p class=" text-gray-400 text-xs">Where are you going?</p>
              <!-- Filter section, show/hide based on section state. -->
              <div class="pt-6" id="filter-section-1">
                <div class="space-y-4">
                  
                  <div class="flex items-center">
                   <svg t="1643012181855" class="w-6 h-6" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15177" width="200" height="200"><path d="M714.835718 834.86814a42.810016 42.810016 0 0 1-6.654165 10.004515L551.552732 1001.571274a43.159011 43.159011 0 0 1-6.328437 9.515922 49.464182 49.464182 0 0 1-66.402058 0 43.298609 43.298609 0 0 1-6.11904-9.306525l-157.536206-157.536207a43.275343 43.275343 0 0 1-6.491302-9.771851 442.05995 442.05995 0 1 1 406.160029 0.395527zM512 93.719734a348.994698 348.994698 0 0 0-162.864192 657.552543v17.170539a44.205995 44.205995 0 0 1 29.315554 12.656874L512 914.648328l132.920447-132.943713a44.205995 44.205995 0 0 1 29.85068-12.726674v-17.705664A348.994698 348.994698 0 0 0 512 93.719734z m0 558.391516a209.396819 209.396819 0 1 1 209.396819-209.396818 209.396819 209.396819 0 0 1-209.396819 209.396818z m0-372.261011a162.864192 162.864192 0 1 0 162.864192 162.864193 162.864192 162.864192 0 0 0-162.864192-162.864193z" p-id="15178" fill="#8a8a8a"></path></svg>
                   <label for="filter-category-0" class="ml-2 text-sm text-gray-300">
                      <!-- <p>Alaska,United States</p> -->
                      <p class="">About {{count}} Ski Resorts  {{region && 'around the '+region}}</p>
                    </label>
                   
                  </div>
                    

                 <div class="flex items-center  align-middle text-center">
                   
                   <label for="modal-region" class="mx-auto block">  <div class="btn btn-sm btn-warning ">View All Regions </div> </label>
                     
                  </div>

                </div>
              </div>
            </div>

            <div class="border-b border-gray-700 py-6">
              <h3 class="-my-3 flow-root">
                <!-- Expand/collapse section button -->
                <button type="button" class="py-3  w-full flex items-center justify-between text-sm text-gray-300 hover:text-gray-300" aria-controls="filter-section-0" aria-expanded="false">
                  <span class="font-medium text-gray-300">
                    Category
                  </span>
                   
                </button>
              </h3>
              <!-- Filter section, show/hide based on section state. -->
              <div class="pt-6" id="filter-section-0">
                <div class="space-y-4">
                  <div class="flex items-center">
                    <input @click="getTopic" id="filter-color-0" name="category[]" value="all_mountain_terrain" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-0" class="ml-3 text-sm text-gray-300">
                      All Mountain Terrain
                    </label>
                  </div>

                  <div class="flex items-center">
                    <input  @click="getTopic" id="filter-color-1" name="category[]" value="overall_value" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-1" class="ml-3 text-sm text-gray-300">
                      Overall Value
                    </label>
                  </div>

                  <div class="flex items-center">
                    <input  @click="getTopic" id="filter-color-2" name="category[]" value="expert" type="checkbox"  class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-2" class="ml-3 text-sm text-gray-300">
                      Expert
                    </label>
                  </div>

                  <div class="flex items-center">
                    <input id="filter-color-3"  @click="getTopic" name="category[]" value="apres_ski" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-3" class="ml-3 text-sm text-gray-300">
                      Apres Ski
                    </label>
                  </div>

                  <div class="flex items-center">
                    <input   @click="getTopic" id="filter-color-4" name="category[]" value="terrain_park" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-4" class="ml-3 text-sm text-gray-300">
                      Terrain Park
                    </label>
                  </div>

                  <div class="flex items-center">
                    <input   @click="getTopic" id="filter-color-5" name="category[]" value="intermediate" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-5" class="ml-3 text-sm text-gray-300">
                      Intermediate
                    </label>
                  </div>
                  <div class="flex items-center">
                    <input   @click="getTopic" id="filter-color-5" name="category[]" value="family_friend" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-5" class="ml-3 text-sm text-gray-300">
                      Family Friend
                    </label>
                  </div>
                  <div class="flex items-center">
                    <input  @click="getTopic" id="filter-color-5" name="category[]" value="beginner" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
                    <label for="filter-color-5" class="ml-3 text-sm text-gray-300">
                      Beginner
                    </label>
                  </div>
                   

                </div>
              </div>
            </div>

            
             
          </form>

          <!-- Product grid -->
          <div class="lg:col-span-3">
            <!-- Replace with your content -->
               <div class="menu-box mb-4">
              <ul class="w-full menu items-stretch px-3 shadow-lg  horizontal rounded-box bg-gray-800 text-gray-300">
                <li @click="getTopic('lastposttime')"  class="cursor-pointer" :class="sort=='lastposttime' ? 'bordered' : ''">
                  <a>
                      Recent  
                      </a>
                </li> 

                <li @click="getTopic('overall_rating')"  class="cursor-pointer" :class="sort=='overall_rating' ? 'bordered' : ''">
                  <a>
                     Best Rating
                      </a>
                </li> 
                
                <li @click="getTopic('votes')" class="cursor-pointer" :class="sort=='votes' ? 'bordered' : ''">
                  <span>
                        Most Liked
                      </span>
                </li> 
                
                
              </ul>
            </div>          
              <div class="p-10 text-center text-gray-200" v-if="showNoting">
               There are no ski resort with this tag.
            </div>

                <a  v-for="(item,key) in topics"  v-bind:key="key" :href="'/ski-resort/'+item.slug"   class="card lg:card-side text-gray-300 rounded-box p-4 bg-gray-800 mb-3">
                 
                <figure class="h-40 w-80 p-2" v-if="item.cover"  style="max-height: 200px; width:300px; overflow: hidden;">
                    <img class=" max-w-fit"   :src="item.cover"  style="max-width:300px;">
                  </figure> 
                <div class="card-body p-0  pt-4 lg:pt-0 lg:pl-4 " >
                    <h2 class="card-title text-gray-100 p-0 m-0" v-html="item.title"></h2> 
                    <div class="mb-2" >
                        <Star :count="item.overall_rating"/>
                    </div>
                    <p v-html="item.full_address" ></p> 
                        <div class="mt-3"  v-if="item.tags && item.tags.length>0">
                          <a  class="btn btn-outline btn-xs text-gray-400 mr-1 mt-1" v-for="(tag,key) in item.tags.slice(0,5)" v-bind:key="key"  :href="'/tags/'+tag"  >{{tag}}</a> 
                      </div>
                       <div class="mt-2"> 
                        <span class="float-left">  {{item.postcount}} Reviews</span>
                        <div class="float-right">
                        <svg t="1641192519668" class="h-6 w-6 inline-block" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11421" width="200" height="200"><path d="M923.421 501.927c-31.19-83.254-86.289-154.373-159.107-205.71-74.638-52.55-162.384-80.464-254.013-80.464s-179.374 27.792-254.013 80.464c-72.94 51.458-127.917 122.576-159.107 205.71l-3.884 10.194 3.884 10.194c31.19 83.254 86.289 154.373 159.107 205.71 74.638 52.55 162.384 80.464 254.013 80.464s179.374-27.792 254.013-80.464c72.94-51.458 127.917-122.576 159.107-205.71l3.884-10.194-3.884-10.194z m-413.12 248.429c-155.102 0-296.126-95.269-354.623-238.114 58.375-142.965 199.521-238.114 354.623-238.114s296.126 95.269 354.623 238.114c-58.497 142.845-199.643 238.114-354.623 238.114z" p-id="11422" fill="#dbdbdb"></path><path d="M510.301 357.99c-84.955 0-154.131 69.177-154.131 154.131s69.177 154.131 154.131 154.131 154.131-69.177 154.131-154.131S595.255 357.99 510.301 357.99z m0 250.008c-52.914 0-95.877-42.962-95.877-95.877s42.962-95.877 95.877-95.877 95.877 42.962 95.877 95.877-43.084 95.877-95.877 95.877z" p-id="11423" fill="#dbdbdb"></path></svg>
                        <span class="inline-block">{{item.viewcount}}</span>
                        <svg t="1641192768302" class="h-4 w-4 inline-block ml-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12280" width="200" height="200"><path d="M511.913993 928.016126c-28.898371 0-57.968755-12.729044-86.695112-41.455401L106.30472 564.034268C68.117588 516.38636 31.994625 471.318663 31.994625 383.935495c0-141.223585 114.905426-255.956996 255.956996-255.956996 53.15236 0 104.068537 16.169326 147.244079 46.615824 14.449185 10.148833 17.889467 30.102469 7.740635 44.551655-10.148833 14.449185-30.102469 17.889467-44.551655 7.740635-32.338653-22.877877-70.525785-34.918864-110.433059-34.918864-105.960692 0-191.967747 86.179069-191.967747 191.967747 0 61.409037 20.297665 90.135394 59.172854 138.643373l315.645893 318.742147c15.997312 15.997312 28.898371 22.361834 41.283387 22.533848 12.729044 0.172014 24.942046-6.192508 41.455401-22.705863l316.677977-319.946246c25.974131-28.210314 57.968755-75.858223 57.968755-137.439274 0-105.960692-86.179069-191.967747-191.967747-191.967747-47.991937 0-94.091718 17.889467-129.526625 50.22812l-133.998992 134.171006c-12.55703 12.55703-32.682681 12.55703-45.239711 0s-12.55703-32.682681 0-45.239711l135.031077-135.203091c48.335965-44.207626 109.745003-67.945574 173.734252-67.945574 141.223585 0 255.956996 114.905426 255.956996 255.956996 0 82.394759-41.111372 144.319839-75.686209 181.646901L598.781119 886.388712C569.882748 915.287082 540.984378 928.016126 511.913993 928.016126z" p-id="12281" fill="#dbdbdb"></path></svg>
                        <span class="inline-block">{{item.upvotes}}</span>
                        </div>
                        <div class="clear-both"></div>

                    </div>
                </div>
                </a>
 
                
 
            <!-- /End replace -->
          </div>
        </div>
      </section>
    </main>
  </div>
</div>

</div>
<!-- 地区 -->
<input type="checkbox" id="modal-region" class="modal-toggle"> 
<div class="modal">
  <div class="modal-box p-0">
    <h1 class="p-3">View All Regions</h1>
    <div class="h-52 w-full overflow-y-scroll overflow-x-hidden border border-gray-200">
      
    <div class="p-10 text-center text-gray-200"  v-if="regionsRes.code>0">{{regionsRes.msg}}</div>
     <div class="label_div" v-for="(region,key) of regionsRes.data" v-bind:key="key">
        <h2 class="border-b border-gray-200  p-2"><a   :href="'/ski-resort/'+key" class=" text-blue-400 hover:underline">{{key}}</a></h2>
       <a :href="'/ski-resort/'+city.city" class="ml-2 mt-2   inline-block text-blue-400 hover:underline" v-for="(city,kk) in region" v-bind:key="kk">{{city.name}} <span>({{city.count}})</span></a> 
     </div>
     
    
   </div>
   <div class="modal-action p-3">
      <label for="modal-region" class="btn">Close</label>
    </div>
  </div>
</div>
<!-- 地区 -->
</div>
</template>


<script>

export default {
  layout({req}){
    // //console.log("req.layout:",req.layout)
     return "web";
  },
 
  name: 'IndexPage',
   data(){
    return { 
      slideTpye:'small',
      user:{},
      page:2,
      pl:"pl-0 md:pl-20",
      filterStatus:0,
      sortMenu:false,
      sort:'lastposttime',
      topics:[],
      regionsRes:{},
      region:'',
      count:0,
      tags:[],
      showNoting:false
    }
  },
   async asyncData({$axios,req,params,$Data,error,route}) {
     let meta = await $Data.getMeta(route.path);
     let res ={};
     let topics=[];
     let count = 0;
    //  //console.log("asyncData params:",params)
     if(params.region){
        res = await  $axios.post('snogogo_nuxt/api/getDocsWithScore',{cid:">3",type:"topic",city:params.region})
        topics = res.data.list;
        count = res.data.total;
    }else{
        res = await  $axios.post('snogogo_nuxt/api/page',{slug:"category/3/ski-resort?_uid=1"})
        topics = res.data.topics;
        count = res.data.topic_count;
     }
    //  //console.log("res topics:", JSON.stringify( topics))
    //  this.title = pathMatch;
      if(res.code>0){
        error({
            'statusCode': res.code,
            'message':res.code==404?"Page Not Found": JSON.stringify( res.msg),
        })
        return
      }
      // regions
      let regionsRes =await $Data.getRegion();
      // //console.log("regionsRes:",regionsRes)
      let showNoting = false;
      if(topics.length==0){
        showNoting=true;
      }
      return { 
         data:res.data,
         topics,
         layout:req.layout,
         regionsRes,
         region:params.region,
         count,
         meta,
         showNoting
      }
   },
    async fetch({ store, params }) {
      // //console.log("store.state.user:",store)
      // await store.dispatch('GET_USER')
   },
     mounted(){
     var _this = this;
     this.$tools.nextPage(()=>{
        _this.getTopicRes()
     });
   } ,
   head() {
    return {
      title: this.meta.title,
      meta: [
         {
          name: 'keywords',
          content: this.meta.keywords,
        },
        {
          name: 'description',
          content:this.meta.description
        }
      ]
      }
    },
  methods: {
     dohideFilters(){
     
      this.filterStatus = 0;
      //  //console.log("this.filterStatus:",this.filterStatus)
    },
    // 左侧菜单显示
     showBigSlideMenu(){
         if(this.layout=="wap"){
            //console.log("this.layout:",this.layout)
            this.filterStatus =  1;
            return;
         }
        // //console.log("per:pl",this.pl,"slideTpye:",this.slideTpye)
        if(this.slideTpye=="small"){
          this.slideTpye="big";
          this.pl="pl-0 md:pl-60";
        }else{
          this.slideTpye="small";
          this.pl="pl-0 md:pl-20";
        }
     },
      //  sort
    async getTopic(sort=""){
      //console.log("pathMatch:",this.pathMatch,"this.params",this.params)
      if(sort!=""){
        this.sort = sort;
      }
      var tags = [];
      for(var  c  of document.getElementsByName("category[]")){
          if( c.checked){
              tags.push(c.value)
          }
      }
      this.tags = tags;
      this.page=1;
      this.lastpage=0;
      this.topics=[];
      this.getTopicRes(1);
    },
    async getTopicRes(reload=0){
      if( this.loading ==1 || this.lastpage==1){
         return;
       }
       this.loading =1;
        //this.$tools.showToast('Loading...', 10000)
        var post ={
          page:this.page,
          sort:this.sort,
          tags:this.tags,
          cid:3,
          region:this.region
        };
    
        //  tags
      // if(  this.params.tag){
      //     // pathMatch ="tags/"+params.tag; 
      //      post.keywords=[{name:this.params.tag,score:1}];
      // }
       this.showNoting = false;
       let res = await  this.$axios.post("snogogo_nuxt/api/getDocsWithScore",post)
       //this.$tools.hideToast();
        this.loading = 0;
       if(res.code>0){
          this.$tools.alert("error",res.code+":"+res.msg)
          return;
       }
        this.page++;
       if(res.data.list.length==0){
         this.lastpage=1;
         return;
       }
       
       if(reload==1){
          this.topics = res.data.list;
       }else{
           this.topics = this.topics.concat(res.data.list);
       }
       if(this.topics.length==0){
          this.showNoting = true;
        }
    },
   }
   
 
     

}
</script>
